<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.matchValue" clearable class="filter-item" style="width: 200px;" placeholder="匹配关键词" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      <el-button :loading="downloadLoading" class="filter-item" type="primary" @click="handleAdd()">新增</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>

      <el-table-column align="center" label="规则名称" prop="ruleName" />

      <el-table-column align="center" label="匹配关键词" prop="matchValue" />

      <el-table-column align="center" label="消息类型" prop="replyType" />

      <el-table-column align="center" label="回复内容" prop="replyContent" />

      <el-table-column align="center" label="操作" width="300" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" >修改</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)" >删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <!-- 新增规格 -->
    <el-dialog :visible.sync="userDialogVisible" title="新增规格">

      <el-form ref="dataForm" :model="dataForm" :rules="dataRule" status-icon label-position="left"
        label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="规则名称" prop="ruleName">
          <el-input v-model="dataForm.ruleName" placeholder="规则名称"></el-input>
        </el-form-item>
        <el-form-item label="匹配词" prop="matchValue">
          <el-input v-model="dataForm.matchValue" placeholder="匹配词/关键词"></el-input>
        </el-form-item>
        <!--
            <el-row>
                <el-col :span="12">
                    <el-form-item label="作用范围" prop="appid">
                        <el-select v-model="WxMsgReplyRule.appid" placeholder="作用范围">
                            <el-option label="全部公众号" value="1"></el-option>
                            <el-option label="当前公众号" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="精确匹配" prop="exactMatch">
                        <el-switch v-model="WxMsgReplyRule.exactMatch" :active-value="true" :inactive-value="false"></el-switch>
                    </el-form-item>
                </el-col>
            </el-row>-->
        <el-row>
          <el-col :span="15">
            <el-form-item label="回复类型" prop="replyType">
              <el-select v-model="dataForm.replyType" @change="onReplyTypeChange">
                <el-option v-for="(name,key) in KefuMsgType" :key="key" :value="key" :label="name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--
                <el-col :span="12">
                    <el-form-item label="是否启用" prop="status">
                        <el-switch v-model="WxMsgReplyRule.status" :active-value="true" :inactive-value="false"></el-switch>
                    </el-form-item>
                </el-col>-->
        </el-row>
        <!--
            <el-row>
                <el-col :span="20">
                    <el-form-item label="生效时间" prop="effectTimeStart">
                        <el-time-picker v-model="WxMsgReplyRule.effectTimeStart" value-format="HH:mm:ss"></el-time-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="20">
                    <el-form-item label="失效时间" prop="effectTimeEnd">
                        <el-time-picker v-model="WxMsgReplyRule.effectTimeEnd" value-format="HH:mm:ss"></el-time-picker>
                    </el-form-item>
                </el-col>
            </el-row>-->
        <el-form-item label="回复内容" prop="replyContent">
          <el-input v-model="dataForm.replyContent" type="textarea" :rows="10" placeholder="文本、图文ID、media_id、json配置"></el-input>
        </el-form-item>
        <el-form-item label="备注说明" prop="desc">
          <el-input v-model="dataForm.desc" placeholder="备注说明"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleMsgAdd">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    fetchList,
    save,
    deleteMsg
  } from '@/api/wxMsg'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  export default {
    name: 'User',
    components: {
      Pagination
    },
    data() {
      return {
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          matchValue: undefined
        },
        downloadLoading: false,
        genderDic: ['未知', '男', '女'],
        levelDic: ['普通用户', 'VIP用户', '高级VIP用户'],
        statusDic: ['可用', '禁用', '注销'],
        userDialogVisible: false,
        userBinding: false,
        WxMsgReplyRule: {},
        addOrUpdateVisible: false,

        KefuMsgType: {
          /* 'image':'图片消息',
           'voice':'语音消息',
           'video':'视频消息',
           'music':'音乐消息'*/
          'news': '文章消息',
          'text': '文本消息',
          'miniprogrampage': '小程序消息', //小程序需选择卡片图

        },
        dataForm: {
          ruleName: undefined,
          exactMatch: true,
          matchValue: undefined,
          replyType: undefined,
          replyContent: undefined,
          status: true,
          desc: undefined,
          effectTimeStart: "00:00:00",
          effectTimeEnd: "23:59:59"
        },
        dataRule: {
          ruleName: [{
            required: true,
            message: "规则名称不能为空",
            trigger: "blur"
          }],
          matchValue: [{
            required: true,
            message: "匹配的关键词、事件等不能为空",
            trigger: "blur"
          }],
          replyType: [{
            required: true,
            message: "回复类型（1:文本2:图文3媒体）不能为空",
            trigger: "blur"
          }],
          replyContent: [{
            required: true,
            message: "回复内容不能为空",
            trigger: "blur"
          }],
          status: [{
            required: true,
            message: "是否有效不能为空",
            trigger: "blur"
          }],
          effectTimeStart: [{
            required: true,
            message: "生效起始时间不能为空",
            trigger: "blur"
          }],
          effectTimeEnd: [{
            required: true,
            message: "生效结束时间不能为空",
            trigger: "blur"
          }]
        },
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        if (this.listQuery.userId) {
          userDetail(this.listQuery.userId).then(response => {
            this.list = [];
            if (response.data.data) {
              this.list.push(response.data.data)
              this.total = 1
              this.listLoading = false
            } else {
              this.list = []
              this.total = 0
              this.listLoading = false
            }
          }).catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
        } else {
          fetchList(this.listQuery).then(response => {
            this.list = response.data.data.list
            this.total = response.data.data.total
            this.listLoading = false
          }).catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
        }
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },

      handleAdd(row) {
        this.userDetail = row
        this.userDialogVisible = true
      },
      handleUserBinding(row) {
        this.userDetail = row
        this.userBinding = true
      },
      handleMsgAdd() {
        save(this.dataForm)
          .then((response) => {
            this.userDialogVisible = false
            this.userBinding = false
            this.list.unshift(response.data.data)
            this.$notify.success({
              title: '成功',
              message: '添加成功'
            })
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.errmsg
            })
          })
      },
    handleDelete(row) {
      deleteMsg(row)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '删除成功'
          })
          const index = this.list.indexOf(row)
          this.list.splice(index, 1)
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
      onReplyTypeChange(value) {
        if ("miniprogrampage" == value) {
          let demo = {
            title: "标题",
            appid: "小程序APPID",
            pagepath: "页面地址",
            thumb_media_id: "缩略图media_id"
          };
          this.dataForm.replyContent = JSON.stringify(demo, null, 4)
        } else if ("music" == value) {
          let demo = {
            musicurl: "音乐链接",
            hqmusicurl: "高品质链接",
            title: "标题",
            description: "描述",
            thumb_media_id: "缩略图media_id"
          }
          this.dataForm.replyContent = JSON.stringify(demo, null, 4)
        } else if ("msgmenu" == value) {
          let demo = {
            head_content: "开头文字",
            list: [{
              id: "菜单1ID",
              content: "菜单2内容"
            }, {
              id: "菜单2ID",
              content: "菜单2内容"
            }, {
              id: "菜单nID",
              content: "菜单n内容"
            }],
            tail_content: "结尾文字"
          }
          this.dataForm.replyContent = JSON.stringify(demo, null, 4)
        } else if ("news" == value) {
          let demo = {
            title: "文章标题",
            description: "文章简介",
            url: "链接URL",
            picUrl: "缩略图URL"
          }
          this.dataForm.replyContent = JSON.stringify(demo, null, 4)
        } else {
          this.dataForm.replyContent = '媒体素材media_id'
        }
      },

    }
  }
</script>
